<template>
  <div class="big-screen-school">
    <el-card class="card-item" style="max-width: 480px" @click="goScreen(1)">
      <div class="card-item_img bg1"></div>
      <div class="card-item_footer flex-center">智慧校园</div>
    </el-card>
    <el-card class="card-item" style="max-width: 480px" @click="goScreen(2)">
      <div class="card-item_img bg2"></div>
      <div class="card-item_footer flex-center">校园出入大屏</div>
    </el-card>
  </div>
</template>
<script setup name="bigScreenSchool" lang="ts">
const router = useRouter();
const goScreen = (type: number) => {
  const path = type === 1 ? '/bigScreen-school' : '/bigScreen-school-entrance'
  router.push(path)
}
</script>
<style scoped lang="scss">
@import '../index.scss';
.big-screen-school {
  display: flex;
  width:100%;
  .card-item {
    width: 400px;
    margin: 20px 10px;
    cursor: pointer;
    &_img {
      width: 100%;
      height: 200px;
      border: 1px solid #000;
      &.bg1 {
        background: url('@/assets/images/bigScreen-bg4.png') no-repeat;
        background-size: 100% 100%;
      }
      &.bg2 {
        background: url('@/assets/images/bigScreen-bg2.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    &_footer {
      margin-top: 15px;
    }
  }
}
</style>
